<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约拍摄 - 漫展接单小程序</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <!-- 顶部导航栏 -->
    <div class="bg-white shadow-md">
        <div class="max-w-screen-xl mx-auto px-4 py-3 flex items-center">
            <button onclick="history.back()" class="mr-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
            </button>
            <div class="text-xl font-bold text-gray-800">预约拍摄</div>
        </div>
    </div>

    <!-- 摄影师信息 -->
    <div class="bg-white p-4">
        <div class="flex items-center">
            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="摄影师头像" class="w-12 h-12 rounded-full mr-3">
            <div>
                <h2 class="font-medium text-gray-800">小明摄影</h2>
                <div class="flex items-center text-xs text-gray-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <span>4.9 (125)</span>
                </div>
            </div>
            <div class="ml-auto bg-green-500 text-white text-xs px-2 py-1 rounded-full">空闲中</div>
        </div>
    </div>

    <!-- 日期选择 -->
    <div class="bg-white mt-4 p-4">
        <h3 class="font-medium text-gray-800 mb-3">选择日期</h3>
        <div class="flex overflow-x-auto space-x-3 pb-2">
            <div class="flex-shrink-0 w-16 h-20 rounded-lg bg-purple-600 text-white flex flex-col items-center justify-center">
                <div class="text-sm">今天</div>
                <div class="text-lg font-bold">11/25</div>
                <div class="text-xs">周六</div>
            </div>
            <div class="flex-shrink-0 w-16 h-20 rounded-lg border border-gray-200 flex flex-col items-center justify-center">
                <div class="text-sm text-gray-600">明天</div>
                <div class="text-lg font-bold text-gray-800">11/26</div>
                <div class="text-xs text-gray-600">周日</div>
            </div>
            <div class="flex-shrink-0 w-16 h-20 rounded-lg border border-gray-200 flex flex-col items-center justify-center">
                <div class="text-sm text-gray-600">后天</div>
                <div class="text-lg font-bold text-gray-800">11/27</div>
                <div class="text-xs text-gray-600">周一</div>
            </div>
            <div class="flex-shrink-0 w-16 h-20 rounded-lg border border-gray-200 flex flex-col items-center justify-center">
                <div class="text-sm text-gray-600">周二</div>
                <div class="text-lg font-bold text-gray-800">11/28</div>
                <div class="text-xs text-gray-600">周二</div>
            </div>
            <div class="flex-shrink-0 w-16 h-20 rounded-lg border border-gray-200 flex flex-col items-center justify-center">
                <div class="text-sm text-gray-600">周三</div>
                <div class="text-lg font-bold text-gray-800">11/29</div>
                <div class="text-xs text-gray-600">周三</div>
            </div>
        </div>
    </div>

    <!-- 时间段选择 -->
    <div class="bg-white mt-4 p-4">
        <h3 class="font-medium text-gray-800 mb-3">选择时间段</h3>
        <div class="grid grid-cols-3 gap-3">
            <div class="border border-purple-600 rounded-lg p-2 text-center text-purple-600">
                <div class="text-sm font-medium">上午</div>
                <div class="text-xs">09:00-12:00</div>
            </div>
            <div class="border border-gray-200 rounded-lg p-2 text-center text-gray-400">
                <div class="text-sm font-medium">下午</div>
                <div class="text-xs">13:00-17:00</div>
                <div class="text-xs text-red-500">已约满</div>
            </div>
            <div class="border border-gray-200 rounded-lg p-2 text-center text-gray-600">
                <div class="text-sm font-medium">晚上</div>
                <div class="text-xs">18:00-21:00</div>
            </div>
        </div>
    </div>

    <!-- 套餐选择 -->
    <div class="bg-white mt-4 p-4">
        <h3 class="font-medium text-gray-800 mb-3">选择套餐</h3>
        <div class="space-y-3">
            <div class="border border-purple-600 rounded-lg p-3">
                <div class="flex justify-between items-center">
                    <div>
                        <div class="font-medium text-gray-800">基础套餐</div>
                        <div class="text-sm text-gray-600 mt-1">30张精修照片，拍摄时间1小时</div>
                    </div>
                    <div class="text-purple-600 font-bold">¥199</div>
                </div>
            </div>
            <div class="border border-gray-200 rounded-lg p-3">
                <div class="flex justify-between items-center">
                    <div>
                        <div class="font-medium text-gray-800">高级套餐</div>
                        <div class="text-sm text-gray-600 mt-1">50张精修照片，拍摄时间2小时</div>
                    </div>
                    <div class="text-gray-800 font-bold">¥299</div>
                </div>
            </div>
            <div class="border border-gray-200 rounded-lg p-3">
                <div class="flex justify-between items-center">
                    <div>
                        <div class="font-medium text-gray-800">豪华套餐</div>
                        <div class="text-sm text-gray-600 mt-1">80张精修照片，拍摄时间3小时，赠送精美相册</div>
                    </div>
                    <div class="text-gray-800 font-bold">¥499</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 备注信息 -->
    <div class="bg-white mt-4 p-4">
        <h3 class="font-medium text-gray-800 mb-3">备注信息</h3>
        <textarea class="w-full border border-gray-200 rounded-lg p-3 text-sm" rows="3" placeholder="请填写您的Cosplay角色、服装准备情况等信息，帮助摄影师更好地准备拍摄"></textarea>
    </div>

    <!-- 底部结算栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white shadow-md p-3 flex items-center">
        <div class="flex-1">
            <div class="text-xs text-gray-500">总计</div>
            <div class="text-lg font-bold text-purple-600">¥199</div>
        </div>
        <button class="bg-purple-600 text-white py-3 px-6 rounded-lg font-medium">立即预约</button>
    </div>

    <!-- 底部占位，防止内容被固定底栏遮挡 -->
    <div class="h-20"></div>
</body>
</html>